<!-- Start Content-->
<div class="container-fluid admin-custom" id="welcome">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-left mt-3">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/workplace"><i class="feather icon-home"></i></a></li>
                        <li class="breadcrumb-item active">导航菜单</li>
                    </ol>
                </div>
            </div>
        </div>

        <div class="col-xl-8 col-md-12">
            <div class="col-md">
                <div class="card mb-3">
                    <!-- Add `.with-elements` to the parent `.card-header` element -->
                    <div class="card-header with-elements border-bottom-0">
                        <h5 class="card-header-title mr-2">
                            导航菜单
                            <small class="text-danger">&emsp;一级菜单最多能设置15个上架。</small>
                        </h5>
                        <div class="card-header-elements ml-md-auto">
                            <button type="button" class="btn btn-xs btn-outline-primary"><a
                                        href="/menuSetting/add"><span class="ion ion-md-add"></span> 新增</a></button>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="card">
                            <table id="datatable-buttons" class="table table-striped dt-responsive nowrap" width="100%">
                                <thead>
                                <tr>
                                    <th>菜单名</th>
                                    <th>路由</th>
                                    <th>icon</th>
                                    <th>二级菜单</th>
                                    <th>移动</th>
                                    <th>详情</th>
                                </tr>
                                </thead>
                                <tbody>
                                {{range $i, $v := .menu_data.list}}
                                    <tr>
                                        <td>{{$v.MenuName}}</td>
                                        <td>{{$v.Path}}</td>
                                        <td>
                                            <i class="{{$v.Icon}}"></i>
                                        </td>
                                        {{/*<td>
                                        <div class="custom-control custom-checkbox">
                                            {{if $v.ChildStatus}}
                                            <input onchange="changeMenu({{$v.Id}}, {{$v.ChildStatus}})" type="checkbox" checked class="custom-control-input" id="customCheck{{$v.Id}}">
                                            {{else}}
                                            <input onchange="changeMenu({{$v.Id}}, {{$v.ChildStatus}})" type="checkbox" class="custom-control-input" id="customCheck{{$v.Id}}">
                                            {{end}}
                                            <label class="custom-control-label" for="customCheck{{$v.Id}}"></label>
                                        </div>
                                    </td>*/}}
                                        {{/*这个字段不能随意改动的。*/}}
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                {{if $v.ChildStatus}}
                                                    <input type="checkbox" disabled checked class="custom-control-input"
                                                           id="customCheck{{$v.Id}}">
                                                {{else}}
                                                    <input type="checkbox" disabled class="custom-control-input"
                                                           id="customCheck{{$v.Id}}">
                                                {{end}}
                                                <label class="custom-control-label" for="customCheck{{$v.Id}}"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="/api/menuSetting/move/up?sort={{$v.Sort}}&page={{$.menu_data.current}}"
                                               title="上移">
                                                <i class="feather icon-arrow-up"></i>
                                            </a>
                                            <a href="/api/menuSetting/move/down?sort={{$v.Sort}}&page={{$.menu_data.current}}"
                                               title="下移">
                                                <i class="feather icon-arrow-down"></i>
                                            </a>
                                        </td>
                                        <td>
                                            {{if $v.Visible}}
                                                <a href="/api/menuSetting/issue?id={{$v.Id}}&status={{$v.Visible}}&page={{$.menu_data.current}}"
                                                   class="text-warning">下架</a>
                                            {{else}}
                                                <a href="/api/menuSetting/issue?id={{$v.Id}}&status={{$v.Visible}}&page={{$.menu_data.current}}"
                                                   class="text-success">上架</a>
                                            {{end}}
                                            {{if eq $v.Visible false}}
                                                {{if ne $v.MenuName "首页"}}
                                                    <div role="separator"
                                                         class="ant-divider ant-divider-vertical"></div>
                                                    <a href="/article/list?page=1&tag={{$v.Id}}"
                                                       class="text-c-blue">详情</a>
                                                {{end}}
                                                <!-- Danger header modal -->
                                                <div role="separator" class="ant-divider ant-divider-vertical"></div>
                                                {{if $v.State}}
                                                    <a href="#!" class="text-c-blue text-facebook" data-toggle="modal"
                                                       data-target="#danger-header-modal-{{$v.Id}}">已删除</a>
                                                {{else}}
                                                    <a href="#!" class="text-c-blue text-danger" data-toggle="modal"
                                                       data-target="#danger-header-modal-{{$v.Id}}">删除</a>
                                                {{end}}
                                            {{end}}
                                            <!-- Danger Header Modal -->
                                            {{if eq  $v.State false}}
                                                <div id="danger-header-modal-{{$v.Id}}" class="modal fade" tabindex="-1"
                                                     role="dialog" aria-labelledby="danger-header-modalLabel"
                                                     aria-hidden="true">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header modal-colored-header bg-danger">
                                                                <h4 class="modal-title" id="danger-header-modalLabel">
                                                                    删除菜单</h4>
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        aria-hidden="true">×
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <h4 class="mt-0 text-center">
                                                                    <i class="mdi text-warning mdi-alert-circle"></i>
                                                                    <span class="font-14">是否删除该菜单?</span>
                                                                </h4>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                        data-dismiss="modal">取消
                                                                </button>
                                                                <button type="button" class="btn btn-danger"
                                                                        onclick="deleteMenu({{$v.Id}})">确认
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {{end}}
                                        </td>
                                    </tr>
                                {{end}}
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-end align-items-center">
                            <ul class="pagination float-right pagination-rounded justify-content-end">
                                <li class="page-item default">
                                    <a class="page-link" href="javascript:;">共 {{ .menu_data.total }} 条</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link"
                                       href="{{ if eq $.menu_data.current 1}}javascript:;{{ else }}?page={{.menu_data.prepage}}{{ end }}"
                                       aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                </li>
                                {{if gt $.menu_data.current 5}}
                                    <li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
                                {{end}}
                                {{ range $k,$v := .menu_data.pages }}
                                    {{ if and ( gt $.menu_data.current 5 ) (eq $k 0) }}
                                        <li class="page-item"><a class="page-link" href="javascript: void(0);">...</a>
                                        </li>
                                    {{ else }}
                                        <li class="page-item">
                                            {{ if eq $v $.menu_data.current }}
                                                <a class="page-link"
                                                   style="color:#fff;border-color: #5d78ff;background-color: #5d78ff;width: 33px;height: 33px;text-align: center;"
                                                   href="javascript: void(0);">{{ $v }}</a>
                                            {{ else }}
                                                <a class="page-link" href="?page={{ $v }}">{{ $v }}</a>
                                            {{ end }}
                                        </li>
                                    {{ end }}
                                {{ end }}
                                <li class="page-item">
                                    <a class="page-link"
                                       href="{{ if  eq $.menu_data.current .menu_data.totalpages}}javascript:;{{ else }}?page={{.menu_data.nextpage}}{{ end }}"
                                       aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </li>
                                <li class="page-item default">
                                    <a class="page-link" href="javascript:;">共 {{ .menu_data.totalpages }} 页</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-12">
            <div class="card ui-activity-card">
                <div class="card-body">
                    <h4 class="mt-0 mb-3">注意事项：</h4>
                    <div class="ui-activity-list">
                        <div class="row py-3">
                            <div class="col-auto text-right update-meta">
                                <i class="bg-success update-icon ring"></i>
                            </div>
                            <div class="col pl-2">
                                <h5 class="m-0">导航菜单</h5>
                                <p class="mb-0">最多能上架15个一级导航菜单。</p>
                            </div>
                        </div>
                        <div class="row pb-3">
                            <div class="col-auto text-right update-meta">
                                <i class="bg-warning update-icon ring"></i>
                            </div>
                            <div class="col pl-2">
                                <h5 class="m-0">二级菜单</h5>
                                <p class="mb-0">二级菜单设置后不能修改状态。</p>
                            </div>
                        </div>
                        <div class="row pb-3">
                            <div class="col-auto text-right update-meta">
                                <i class="bg-danger update-icon ring"></i>
                            </div>
                            <div class="col pl-2">
                                <h5 class="m-0">下架菜单</h5>
                                <p class="mb-0">菜单下所有导航、文章不会在页面展示。</p>
                            </div>
                        </div>
                        <div class="row pb-3">
                            <div class="col-auto text-right update-meta">
                                <i class="bg-primary update-icon ring"></i>
                            </div>
                            <div class="col pl-2">
                                <h5 class="m-0">排序规则</h5>
                                <p class="mb-0">前台导航菜单是按照从上往下排序。</p>
                            </div>
                        </div>
                        <div class="row pb-3">
                            <div class="col-auto text-right update-meta">
                                <i class="bg-success update-icon ring"></i>
                            </div>
                            <div class="col pl-2">
                                <h5 class="m-0">删除菜单</h5>
                                <p class="mb-0">菜单删除是进行软删除。</p>
                            </div>
                        </div>
                        <div class="row pb-3">
                            <div class="col-auto text-right update-meta">
                                <i class="bg-warning update-icon ring"></i>
                            </div>
                            <div class="col pl-2">
                                <h5 class="m-0">字体图标</h5>
                                <p class="mb-0">可以配置阿里巴巴矢量图标。<a href="https://www.iconfont.cn/" target="_blank"
                                                                class="text-c-green"> More</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
</div>